<!--begin::图片截取-->
<div class="modal fade" id="cropper-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">${title}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-9">
                        <div class="cropper-wrapper"></div>
                    </div>
                    <div class="col-md-3">
                        <div class="docs-preview clearfix">
                            <div class="cropper-preview preview-lg"></div>
                            <div class="cropper-preview preview-md"></div>
                            <div class="cropper-preview preview-sm"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9 cropper-tool">
                        <div class="btn-group">
                            <label class="btn btn-brand btn-sm btn-icon btn-upload" for="inputImage" title="Upload image file">
                                <input type="file" class="sr-only cropper-input" id="inputImage" name="file"
                                       accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传图片">
                                    <i class="fa fa-upload"></i>
                                </span>
                            </label>
                        </div>

                        <div class="btn-group">
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="zoom" data-option="0.1">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大">
                                    <i class="fa fa-search-plus"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="zoom" data-option="-0.1">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小">
                                    <i class="fa fa-search-minus"></i>
                                </span>
                            </button>
                        </div>

                        <div class="btn-group">
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="move" data-option="-10"
                                    data-second-option="0">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左移">
                                    <i class="fa fa-arrow-left"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="move" data-option="10"
                                    data-second-option="0">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="右移">
                                    <i class="fa fa-arrow-right"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="move" data-option="0"
                                    data-second-option="-10">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上移">
                                    <i class="fa fa-arrow-up"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="move" data-option="0"
                                    data-second-option="10">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="下移">
                                    <i class="fa fa-arrow-down"></i>
                                </span>
                            </button>
                        </div>

                        <div class="btn-group">
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="rotate" data-option="-45">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向左旋转">
                                     <i class="fa fa-undo"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="rotate" data-option="45">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向右旋转">
                                    <i class="fa fa-redo"></i>
                                </span>
                            </button>
                        </div>

                        <div class="btn-group">
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="scaleX" data-option="-1">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="水平翻转">
                                    <i class="fa fa-arrows-alt-h"></i>
                                </span>
                            </button>
                            <button type="button" class="btn btn-brand btn-sm btn-icon" data-method="scaleY" data-option="-1">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="垂直翻转">
                                    <i class="fa fa-arrows-alt-v"></i>
                                </span>
                            </button>
                        </div>
                    </div><!-- /.docs-buttons -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand cropper-save">确认</button>
            </div>
        </div>
    </div>
</div>
<!--end::图片截取-->